<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-链式编程</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    我是body的样式
    <button>李白</button>
    <button>虞姬</button>
    <button>诸葛亮</button>
    <button>项羽</button>
    <button>哪吒</button>

    <script>
        // 链式编程：是为了节省代码量，看起来更优雅
        // $(this).css('color','red').siblings().css('color','')
        // 使用链式编程一定要注意是哪个对象执行样式


        $(function(){
            $('button').click(function(){
                // console.log(this);
                // css() 函数的返回值是 当前 jQuery 对象
                // let result = $(this).css('background','skyblue');
                // console.log(result);
                // result.siblings().css('background',"");
                 // console.log( result.siblings().css('backgroundColor', ""));
                
                $(this).css('backgroundColor','skyblue').siblings().css('backgroundColor',"");
                // 我的颜色为天蓝色，我的兄弟颜色为空
                // $(this).siblings().css('backgroundColor',"red");
                // 我的兄弟变为红色，我本身不变色
                // $(this).siblings().parent().css('backgroundColor',"blue");
                // 最后是给我兄弟的爸爸 body 变化颜色
            });
        });
    </script>
</body>
</html>